import React, {useState} from 'react';
import {connect} from "react-redux";
import {Col, Row} from "reactstrap";
import Select from "react-select";
import {setFieldData} from "../../../redux/actions/helper";
import {SET_CONTACT_FIELD} from "../../../redux/constants/contacts";
import {getContacts} from "../../../redux/actions/contacts";


const Filter = (props) => {
  const {reqParams, types} = props
  const {setFieldData, getContacts} = props
  const [requestTime, setRequestTime] = useState(0)

  const setRequestParams = (field, payload) => {
    setFieldData(SET_CONTACT_FIELD, 'reqParams', {
      ...reqParams,
      [field]: payload
    })
    getContacts({...reqParams, [field]: payload})
  }

  const setSearchValue = (field, payload) => {
    setFieldData(SET_CONTACT_FIELD, 'reqParams', {
      ...reqParams,
      [field]: payload
    })

    clearTimeout(requestTime)

    setRequestTime(setTimeout(() => {
      if (requestTime) props.getContacts({...reqParams, [field]: payload})
    }, 500))
  }

  const status = [{value: 0, label: 'Все'}, {value: 1, label: 'Уже работали'}, {value: 2, label: 'Новый контакт'}];

  const checkedType = () => {
    return Types().filter(type => {
      return type.id === reqParams.type
    })[0] || []
  }
  const Types = () => {
    return [{id: -1, name: 'Все'}].concat(types)
  }
  return (
    <React.Fragment>
      <Row>
        <Col lg={3} md={6} className={'mt-1'}>
          <label className={'filter-label'} htmlFor="type">Тип</label>
          <div>
            <Select
              id={'type'}
              onChange={(e) => setRequestParams('type', e.value)}
              value={{value: checkedType().id, label: checkedType().name}}
              className={`contacts-item contacts-input-select`}
              classNamePrefix="dark_select"
              options={Types().map(type => {
                return {
                  value: type.id,
                  label: type.name,
                }
              })}
              isSearchable={false}
              name='typesList'
            />
          </div>
        </Col>
        <Col lg={3} md={6} className={'mt-1'}>
          <label className={'filter-label'} htmlFor="status">Статус</label>
          <div>
            <Select
              id={'status'}
              className={`contacts-item contacts-input-select`}
              classNamePrefix="dark_select"
              onChange={(e) => setRequestParams('status', e.value)}
              value={{value: reqParams.status, label: status[reqParams.status].label}}
              options={status}
              isSearchable={false}
              name='typesList'
            />
          </div>
        </Col>
        <Col lg={3} md={6} className={'mt-1'}>
          <label className={'filter-label'} htmlFor="name">ФИО</label>
          <div>
            <input
              id={'name'}
              value={reqParams.name}
              onChange={(e) => setSearchValue('name', e.target.value)}
              className={`contacts-item contacts-input input-dark`}/>
          </div>
        </Col>
        <Col lg={3} md={6} className={'mt-1'}>
          <label className={'filter-label'} htmlFor="email">Email</label>
          <div>
            <input
              id={'email'}
              value={reqParams.email}
              onChange={(e) => setSearchValue('email', e.target.value)}
              className={`contacts-item contacts-input input-dark`}/>
          </div>
        </Col>
      </Row>
    </React.Fragment>
  )
}

const mapStateToProps = state => ({
  types: state.contacts.types,
  reqParams: state.contacts.reqParams
})

export default connect(mapStateToProps, {
  setFieldData, getContacts
})(Filter);
